<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹跳小球</title>
    <style>
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
</head>

<body>
    <canvas id="myCanvas"></canvas>
    <script>
        let canvas = document.querySelector("#myCanvas")
        let ctx = canvas.getContext("2d")
        let width = canvas.width = window.innerWidth
        let height = canvas.height = window.innerHeight
        let balls = []

        function randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        }
        function randomColor() {
            return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")"
        }
        function Ball(x, y, vx, vy, color, size) {
            this.x = x
            this.y = y
            this.vx = vx
            this.vy = vy
            this.color = color
            this.size = size
            if (this.x < this.size) {
                this.x = this.size
            }
            if (this.x + this.size >= width) {
                this.x = width - this.size
            }
            if (this.y < this.size) {
                this.y = this.size
            }
            if (this.y + this.size >= height) {
                this.y = height - this.size
            }
        }
        Ball.prototype.draw = function () {
            ctx.beginPath()
            ctx.fillStyle = this.color
            ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI)
            ctx.fill()
        }
        Ball.prototype.update = function () {
            if (this.x + this.size >= width) {
                this.vx = - this.vx
            }
            if (this.x - this.size <= 0) {
                this.vx = - this.vx
            }
            if (this.y + this.size >= height) {
                this.vy = - this.vy
            }
            if (this.y - this.size <= 0) {
                this.vy = - this.vy
            }
            this.x += this.vx
            this.y += this.vy
        }
        Ball.prototype.collisionDetect = function () {
            if (balls.length >= 200) {
                return
            }
            for (let i = 0; i < balls.length; i++) {
                const b = balls[i];
                if (!(this === b)) {
                    let dx = this.x - b.x
                    let dy = this.y - b.y
                    let distance = Math.sqrt(dx * dx + dy * dy)
                    if (distance < this.size + b.size) {
                        b.color = this.color = randomColor()
                        // let b1 = new Ball(
                        //     randomNum(0, width) + b.size,
                        //     randomNum(0, height) + b.size,
                        //     randomNum(-7, 7),
                        //     randomNum(-7, 7),
                        //     randomColor(),
                        //     b.size / 2
                        // )
                        // let b2 = new Ball(
                        //     randomNum(0, width) + b.size,
                        //     randomNum(0, height) + b.size,
                        //     randomNum(-7, 7),
                        //     randomNum(-7, 7),
                        //     randomColor(),
                        //     b.size / 2
                        // )
                        // b1.draw()
                        // b1.update()
                        // b2.draw()
                        // b2.update()
                        // balls.splice(i, 1, b1, b2)
                    }
                }
            }
        }

        function loop() {
            ctx.fillStyle = 'rgba(0, 0, 0, .2)';
            ctx.fillRect(0, 0, width, height);
            // ctx.clearRect(0, 0, width, height)
            while (balls.length <= 120) {
                let ball = new Ball(
                    randomNum(0, width),
                    randomNum(0, height),
                    randomNum(-7, 7),
                    randomNum(-7, 7),
                    randomColor(),
                    randomNum(10, 20)
                )
                balls.push(ball)
            }
            for (let i = 0; i < balls.length; i++) {
                const b = balls[i]
                b.draw()
                b.update()
                b.collisionDetect()
            }
            requestAnimationFrame(loop)
        }
        loop()

        // function loop2() {
        //     ctx.fillStyle = 'rgba(0, 0, 0, .3)';
        //     ctx.fillRect(0, 0, width, height);
        //     while (balls.length < 50) {
        //         let ball = new Ball(
        //             randomNum(0, width),
        //             randomNum(0, height),
        //             randomNum(-7, 7),
        //             randomNum(-7, 7),
        //             randomColor(),
        //             randomNum(10, 20)
        //         );
        //         balls.push(ball)
        //     }
        //     for (let i = 0; i < balls.length; i++) {
        //         const b = balls[i];
        //         b.draw()
        //         b.update()
        //     }
        // }
        // setInterval(loop2, 10)


        function A(x, y) {
            this.x = x;
            this.y = y;
            this.add = function () {
                return this.x + this.y;
            }
        }
        A.prototype.mul = function () {
            return this.x * this.y;
        }
        // var o = function () { };
        Function.prototype.clone = function (o) {
            function Temp() { };
            Temp.prototype = o;
            return new Temp();
        }
        console.dir(new A(1,2));
        var a = Function.clone(new A(1,2));
        // console.dir(a.x);
        // console.dir(a.y)
        // console.dir(a.add())
    </script>
</body>

</html>